<template>
    <h1>用户购买理财页面</h1>

    <table>
        <tr>
            <td>理财名称</td>
            <td>{{ ShowData.F_Name }}</td>
        </tr>

        <tr>
            <td>年收益</td>
            <td>{{ ShowData.F_Year }}</td>
        </tr>

        <tr>
            <td>利息</td>
            <td>
                <select v-model="ShowData.I_Id">
                    <option v-for="item in Info"::key="ShowData.I_Id" :value="ShowData.I_Id">
                        {{ item.I_Money }}
                    </option>
                </select>
            </td>
        </tr>

        <tr>
            <td>最低金额</td>
            <td>{{ ShowData.F_MinMoney }}</td>
        </tr>

        <tr>
            <td>风险等级</td>
            <td>{{ ShowData.F_Fxiao }}</td>
        </tr>

        <tr>
            <td>用户购买金额</td>
            <td>
                <input type="text" v-model="Money">CNY
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="button" value="确认购买" @click="AddUserFinan" >
            </td>
        </tr>


    </table>

</template>

<script setup lang="ts">

import {ref,onMounted} from 'vue';
import axios from 'axios';
import {useRoute} from 'vue-router';

const route = useRoute();

console.log(route.params.Id);
//显示的数据
const ShowData = ref({
    F_Id:'',
    F_Name:'',
    F_Year:'',
    I_Id:'',
    F_MinMoney:'',
    F_Fxiao:'',
    I_Money:''
})
//利息的数据
const Info = ref([{
    I_Id:'',
    I_Money:''
}])

//用户购买理财金额
const Money = ref('');

//生命周期钩子函数
onMounted(()=>{
    UserInve();
    Show();
})

//显示所有利息
const UserInve = ()=>{
    axios({
        method:'get',
        url:'http://localhost:62821/api/Financing/UserInve',
    })
    .then((res)=>{
        console.log(res.data);
        Info.value = res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}

//显示理财信息
const Show = ()=>{
    axios({
        method:'get',
        url:'http://localhost:62821/api/Financing/UserFinancing',
    })
    .then((res)=>{
        console.log(res.data);
        ShowData.value = res.data[0];
    })
    .catch((err)=>{
        console.log(err);
    })
}

const AddUserFinan =()=>{
    if(Money.value < ShowData.value.F_MinMoney){
        alert('用户购买金额不能小于最低理财金额')
        return;
    }
    axios({
        method:'post',
        url:'http://localhost:62821/api/Financing/AddUserFinan',
        data:{
            U_Id:route.params.Id,
            F_Id:ShowData.value.F_Id,
            UF_Money:Money.value
        }
    })
    .then((res)=>{
        console.log(res.data);
        if(res.data>0){
            alert('用户购买成功');
        }
        else{
            alert('用户购买失败')
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}




</script>